<template>
    <view class="sub-menu">
        <view class="sub-menu-title-area" @click="handleToggleContent" :style="itemStyle">
            <view class="icon-area">
                <al-u-icon :icon="menuItem.icon" />
            </view>
            <view class="menu-area">
                {{ menuItem.name }}
            </view>
            <view class="arrow-area" v-if="showArrow">
                <u-icon name="arrow-down" v-if="collapseState" :color="arrowColor" size="28" />
                <u-icon name="arrow-right" v-else :color="arrowColor" size="28" />
            </view>
        </view>
        <view v-if="collapseState" class="menu-area-next">
            <template v-for="menuInfo of menuItem.children" :key="menuInfo.code">
                <al-sub-menu
                    v-if="menuInfo.children && menuInfo.children.length > 0"
                    :menuItem="menuInfo"
                    :selectedKeys="selectedKeys"
                    v-bind="extendProps"
                />
                <al-menu-item v-else :menuItem="menuInfo" :selectedKeys="selectedKeys" v-bind="extendProps" />
            </template>
        </view>
    </view>
</template>
<script>
    import { defineComponent, ref, computed } from 'vue'
    import AlMenuItem from './menu-item'
    import AlUIcon from './icon'

    export default defineComponent({
        name: 'AlSubMenu',
        components: { AlMenuItem, AlUIcon },
        props: {
            selectedKeys: {
                type: String || Number
            },
            menuItem: {
                type: Object,
                default: () => ({})
            },
            showArrow: {
                type: Boolean,
                default: true
            },
            arrowColor: {
                type: String,
                default: '#aeb4c0'
            },
            backgroundColor: {
                type: String,
                default: '#ffffff'
            },
            color: {
                type: String,
                default: '#ffffff'
            },
            selectedBackgroundColor: {
                type: String,
                default: '#e4f1ff'
            },
            selectedColor: {
                type: String,
                default: '#1890ff'
            }
        },
        emits: ['select'],
        setup(props, { emit, expose }) {
            // 默认关闭，如果当前菜单下是选中项，则展开
            const collapseState = ref(
                JSON.stringify(props.menuItem).indexOf(String(props.selectedKeys)) > -1 ? true : false
            )
            const handleToggleContent = () => {
                collapseState.value = !collapseState.value
            }
            const extendProps = ref({
                showArrow: props.showArrow,
                arrowColor: props.arrowColor,
                backgroundColor: props.backgroundColor,
                color: props.color,
                selectedBackgroundColor: props.selectedBackgroundColor,
                selectedColor: props.selectedColor
            })
            const isActive = computed(() => {
                return props.menuItem.menuId === props.selectedKeys
            })
            const itemStyle = computed(() => {
                return isActive.value
                    ? {
                        backgroundColor: props.selectedBackgroundColor,
                        color: props.selectedColor
                    }
                    : {
                        backgroundColor: props.backgroundColor,
                        color: props.color
                    }
            })
            return {
                handleToggleContent,
                collapseState,
                extendProps,
                itemStyle
            }
        }
    })
</script>
<style lang="less" scoped>
    .sub-menu {
        .sub-menu-title-area {
            padding: 30rpx;
            display: flex;
            align-items: center;
            .icon-area {
                width: 32rpx;
                margin-right: 24rpx;
            }
            .menu-area {
                flex: 1;
            }
        }
    }
</style>
